<template>
	<view class="page">
		<!-- 日期范围选择区域 -->
		<view class="bg-white padding">
			<view class="flex align-center justify-between">
				<u-icon name="calendar" size="36rpx" color="#999"></u-icon>
				<u-text align="center" color="#999" size="28rpx" :text="startDate" @click="showStartDatePicker = true"></u-text>
				<u-text align="center" color="#999" size="28rpx" text="至"></u-text>
				<u-text align="center" color="#999" size="28rpx" :text="endDate" @click="showEndDatePicker = true"></u-text>
			</view>
		</view>
		<view class="main">
			<!-- 日报列表 -->
			<u-list>
				<u-list-item v-for="(item, index) in reportList" :key="index" @click="viewReport(item)">
					<view>
						<view class="flex align-center">
							<!-- 图标 -->
							<u-icon name="/static/image/img-report.png" size="88rpx" color="#FFA726"></u-icon>
							<!-- 内容 -->
							<view class="flex-1 margin-left-sm">
								<u-text :text="item.title" size="32rpx" color="#333333" bold>
								</u-text>
								<u-text :text="item.subtitle" size="24rpx" color="#999999" margin="10rpx 0 0 0">
								</u-text>
							</view>
							<!-- 箭头 -->
							<u-icon name="arrow-right" size="28rpx" color="#999"></u-icon>
						</view>
						<u-text :text="item.description" size="24rpx" color="#666666" :lines="2" margin="10rpx 0 0 0">
						</u-text>
					</view>
				</u-list-item>
			</u-list>

			<!-- 日期选择器 -->
			<u-datetime-picker :closeOnClickOverlay="true" :show="showStartDatePicker" mode="date" @confirm="confirmStartDate"
				@cancel="showStartDatePicker = false" @close="showStartDatePicker = false" :maxDate="new Date().getTime()">
			</u-datetime-picker>

			<u-datetime-picker :closeOnClickOverlay="true" :show="showEndDatePicker" mode="date" @confirm="confirmEndDate"
				@cancel="showEndDatePicker = false" @close="showEndDatePicker = false" :maxDate="new Date().getTime()">
			</u-datetime-picker>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 日期相关
const startDate = ref('2020-02-21')
const endDate = ref('2020-03-11')
const showStartDatePicker = ref(false)
const showEndDatePicker = ref(false)
const type = ref('daily')

// 日报数据
const reportList = ref([
	{
		id: 1,
		title: '张三的日报',
		subtitle: '2025-04-29 星期二',
		description: '今日上传100道题目，共发现10道错题，正确率90%'
	},
	{
		id: 2,
		title: '张三的日报',
		subtitle: '2025-04-29 星期二',
		description: '今日上传100道题目，共发现10道错题，正确率90%'
	},
	{
		id: 3,
		title: '张三的日报',
		subtitle: '2025-04-29 星期二',
		description: '今日上传100道题目，共发现10道错题，正确率90%'
	}
])

const confirmStartDate = (value) => {
	startDate.value = formatDate(value.value)
	showStartDatePicker.value = false
}

const confirmEndDate = (value) => {
	endDate.value = formatDate(value.value)
	showEndDatePicker.value = false
}

const cancelDatePicker = () => {
	console.log('取消选择日期')
}

const formatDate = (date) => {
	const d = new Date(date)
	const year = d.getFullYear()
	const month = String(d.getMonth() + 1).padStart(2, '0')
	const day = String(d.getDate()).padStart(2, '0')
	return `${year}-${month}-${day}`
}

const viewReport = (item) => {

	// 这里可以跳转到日报详情页面
	// uni.navigateTo({
	//   url: `/pages/common/report/detail?id=${item.id}`
	// })
}

onLoad((options) => {
	console.log('日报列表页面加载完成', options);
	type.value = options.type
	if (type.value === 'daily') {
		uni.setNavigationBarTitle({
			title: '日报列表'
		})
	} else {
		uni.setNavigationBarTitle({
			title: '周报列表'
		})
	}
})
</script>

<style scoped lang="scss">
/* 最小化自定义样式，主要使用 uview-plus 组件样式 */

/* u-list 样式微调 */
:deep(.u-list-item) {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	padding: 32rpx;
}
</style>
